<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提前加载-图片懒加载</title>
</head>

<body>
    <style>
        /*图片一定要有固定的宽和高，才能正确监控*/
        img {
            width: 100px;
            height: 100px;

        }
    </style>
    初次耗时约4秒，图片总大小共18m
    <div class="root">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/1.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/2.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/3.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/4.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/5.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/1.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/2.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/3.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/4.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/5.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/1.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/2.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/3.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/4.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/5.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/1.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/2.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/3.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/4.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/5.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/1.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/2.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/3.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/4.jpg">
        <img class="layout" data-src="https://sofile.cn/wp-content/uploads/img_test/5.jpg">

    </div>
    <script>


        var io = new IntersectionObserver(entries => {
            console.log(entries);
            entries.forEach(item => {
                // isIntersecting是一个Boolean值，判断目标元素当前是否可见
                if (item.isIntersecting) {
                    item.target.src = item.target.dataset.src


                    console.log("我被加载咯");

                    // 图片加载后即停止监听该元素
                    io.unobserve(item.target)
                }
            })
        }, {
            rootMargin: "0px 0px 100px 0px"//提前100像素加载
        })

        //拿到每一个img元素
        const imgList = [...document.querySelectorAll('.layout')]//获取所有img元素封装成数组返回

        console.log("所有img节点", imgList)
        // observe遍历监听所有img节点
        imgList.forEach(imgqq => io.observe(imgqq))//有空闲了就加载所有图片
    </script>
</body>

</html>